<template>
    <div>
        <breadcrumb-com>
            <template #one>
                权限管理
            </template>
            <template #two>
                角色列表
            </template>
        </breadcrumb-com>
        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary">添加角色</el-button>
                </el-col>
            </el-row>
            <el-table :data="rolesList" style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="{row}">
                        <el-row type="flex" justify="">
                            <el-col class="col"> <el-tag v-for="item, index in row.children" :key="index">
                                    <span>{{ item.authName }}</span></el-tag>
                               
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column label="角色名称" prop="roleName"></el-table-column>
                <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
                <el-table-column label="操作">
                    <template>
                        <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                        <el-button type="warning" icon="el-icon-star-off" size="mini" @click="fenBtn">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分配权限弹出 -->
        <allocate-authority ref="allocateRef" :roleList="rolesList" :limitShow="limitShow"></allocate-authority>
    </div>
</template>

<script>
import AllocateAuthority from './components/AllocateAuthority.vue'
import { getRolesList } from '@/api/roles';
import BreadcrumbCom from '@/components/BreadcrumbCom.vue';
export default {
    components: { BreadcrumbCom, AllocateAuthority },
    data() {
        return {
            rolesList: [],//角色列表数据
            limitShow: false,//分配权限弹窗显示隐藏
        }
    },
    created() {
        this.getRoles()
    },
    methods: {
        async getRoles() {
            let res = await getRolesList()
            this.rolesList = res
        },
        // 点击分配权限按钮
        fenBtn() {
            this.limitShow=true
            this.$refs.allocateRef.RolesList()
        }
    }
}
</script>

<style lang="scss" scoped>
.col {
    width: 80px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
</style>